<template>
  <NoticeBar :scrollable="false"
    class="notice-bar">
    <span
      style="font-size: 12px;">请选择单卡面值，面值选错损失将由您自己承担！</span>
  </NoticeBar>
  <div class="grid">
    <Grid :gutter="10"  :column-num="2">
      <GridItem
        v-for="(option, index) in scope.options"
        :key="index"
        @click="handleSelect(option)">
        <div class="options">
          <Tag class="rate" color="red">
            {{ option.platformRecycleRate }}
          </Tag>
          <div class="faceValue">
            {{ `${option.faceValue} 元` }}
          </div>
          <Tag color="red" plain class="rateFee">
            {{ `￥ ${option.rateFee}` }}
          </Tag>
        </div>
      </GridItem>
    </Grid>
  </div>
  <div
    class="footer van-hairline--top van-dialog__footer van-hairline--left">
    <Button @click="props.hide" size="large"
      class="van-button van-button--default van-button--large van-dialog__cancel">
      取消
    </Button>
  </div>
</template>
<script setup lang="ts">
import {
  Button, Grid, GridItem, NoticeBar, Tag,
} from 'vant';
import type { PropType } from 'vue';

import type { CardFaceItem } from '../models/CardInstance';

const props = defineProps({
  scope: {
    type: Object as PropType<{
      options: CardFaceItem[]
      emit: (option: CardFaceItem) => void
    }>,
    default: () => ({}),
  },
  hide: {
    type: Function as PropType<() => void>,
    default: () => { },
  },
});

const handleSelect = (option: CardFaceItem) => {
  props.scope.emit(option);
  props.hide();
};
</script>
<style lang="less" scoped>
.grid {
  height: calc(145px * 3 + 20px);
  overflow-y: auto;

  .options {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-grow: 1;
    gap: 10px;

    position: relative;
    width: 100%;

    .rate {
      position: absolute;
      top: -16px;
      left: -8px;
    }

  }
}

.notice-bar {
  :deep(.van-notice-bar__wrap) {
    justify-content: center;
  }
}
</style>
